<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-card>
        <div slot="header">
          <span>欢迎回来: <b>{{ this.userInfo.nickname || this.userInfo.username }}</b></span>
        </div>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">用户标识: </div><div class="info_detail_value">{{ userInfo.id }}</div></el-col>
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">用户名: </div><div class="info_detail_value">{{ userInfo.username || '-' }}</div></el-col>
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">手机号: </div><div class="info_detail_value">{{ userInfo.mobile || '-' }}</div></el-col>
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">邮箱: </div><div class="info_detail_value">{{ userInfo.email || '-' }}</div></el-col>
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">昵称: </div><div class="info_detail_value">{{ userInfo.nickname || '-' }}</div></el-col>
          <!-- 创建类型 1：后台添加 ，0: 用户注册 -->
          <!-- 智能推断为字典类型, 字典类型为 dict.sys_user_create_type -->
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">创建类型: </div><div class="info_detail_value">{{ dict.label.sys_user_create_type[userInfo.createType] || '未知字典码:'+userInfo.createType }}</div></el-col>
          <!--        <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">默认组织id: </div><div class="info_detail_value">{{ userInfo.defDepid || '-' }}</div></el-col>-->
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">上一次登录时间: </div><div class="info_detail_value">{{ userInfo.lastLogin || '-' }}</div></el-col>
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">最后一次登录ip: </div><div class="info_detail_value">{{ userInfo.lastIp || '-' }}</div></el-col>
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">最后一次登录地: </div><div class="info_detail_value">{{ userInfo.lastIpDes || '-' }}</div></el-col>
          <!-- 状态值，字典取值 -->
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">状态: </div><div class="info_detail_value">{{ dict.label.sys_user_status[userInfo.status] || '未知字典码:'+userInfo.status }}</div></el-col>

          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">加入时间:</div><div class="info_detail_value">{{ userInfo.createTime || '-' }}</div></el-col>
          <!--          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">创建人:</div><div class="info_detail_value">{{ userInfo.createUserName || '-' }}</div></el-col>-->
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">最后一次修改时间:</div><div class="info_detail_value">{{ userInfo.updateTime || '-' }}</div></el-col>
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">最后一次修改人:</div><div class="info_detail_value">{{ userInfo.updateUserName || '-' }}</div></el-col>
          <!-- <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">是否被删除数据:</div><div class="info_detail_value">{{ info.isDel?'否':'是' }}</div></el-col> -->
        </el-row>
      </el-card>
      <div style="margin-top: 20px">
        <el-row :gutter="20">
          <el-col :sm="24" :md="12">
            <el-card>
              <div slot="header" style="height: 20px">
                <span>组织信息</span>
              </div>
              <el-row :gutter="20">
                <div v-if="userDeps && userDeps.length >0">
                  <el-col v-for="(userDep ,i) in userDeps" :key="i" :xs="24" :md="12"><div class="info_detail_name">{{ userDep.depName || '-' }} </div><div class="info_detail_value">加入时间：{{ userDep.createTime || '-' }}</div></el-col>
                </div>
                <div v-if="!userDeps || userDeps.length <= 0">
                  <el-col :xs="24">
                    暂没有加入任何组织
                  </el-col>
                </div>
              </el-row>
            </el-card>
          </el-col>
          <el-col :sm="24" :md="12">
            <el-card>
              <div slot="header" style="height: 20px">
                <span>角色信息</span>
              </div>
              <el-row :gutter="20">
                <div v-if="userRoles && userRoles.length >0">
                  <el-col v-for="(role ,i) in userRoles" :key="i" :xs="24" :md="12"><div class="info_detail_name">{{ role.roleName || '-' }} </div><div class="info_detail_value">加入时间：{{ role.createTime || '-' }}</div></el-col>
                </div>
                <div v-if="!userRoles || userRoles.length <= 0">
                  <el-col :xs="24">
                    暂无角色授权
                  </el-col>
                </div>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div></template>

<script>
import { mapGetters } from 'vuex'
import { getInfoDetail, getRolesBySelf, getSelfDeps } from '@/api/user'

export default {
  name: 'Dashboard',
  dicts: [
    'sys_user_create_type',
    'sys_user_status'
  ], // 字典
  data: function() {
    return {
      userInfo: {},
      userRoles: [],
      userDeps: []
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted() {
    this.getInfoDetail()
    this.getRolesBySelf()
    this.getSelfDeps()
  },
  methods: {
    getInfoDetail() {
      getInfoDetail().then(res => {
        this.userInfo = res.data
        // console.log(this.userInfo)
      })
    },
    getRolesBySelf() {
      getRolesBySelf().then(res => {
        this.userRoles = res.data
        // console.log(this.userRoles)
      })
    },
    getSelfDeps() {
      getSelfDeps().then(res => {
        this.userDeps = res.data
        // console.log(this.userDeps)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 20px;
  }
  &-text {
    font-size: 15px;
    line-height: 46px;
  }
}
</style>
